<template>
	<view class="apps">
		<view class="flex fdc psn">
			<image src="//mp.lifecloud.top/static/images/sy.jpg" mode="aspectFill" style="width:750rpx;height:469rpx"></image>
			<view class="flex aic jcc" style="margin-top: -309rpx;">
				<image src="//mp.lifecloud.top/static/images/gift.png" mode="aspectFill" style="width:540rpx;height:490rpx"></image>
			</view>
			<view class="flex jcc ptb20 plr20">
				<view class="flex plr20 ptb20 fdc" style="width:640rpx; background-color: #d81116; border-radius: 10rpx;">
					<view class="f26 ptb10 white">领取须知：</view>
					<view class="f22 ptb10 white">1.本优惠券是由中国石油发出，在地平线便民服务使用。</view>
					<view class="f22 ptb10 white">2.领取规则是用户在石油加油站扫码获取，由店员发放核验码，核验通过，领取成功</view>
					<view class="f22 ptb10 white">3.领取成功后，自动发放到用户账户，用户赠送余额赠加10元洗车费</view>
					<view class="f22 ptb10 white">4.本优惠券只能抵扣地平线洗车费，不能当做现金使用，不能提现，一经领取无法退还。</view>
				</view>
			</view>
			<view style="position: fixed; bottom:150rpx; left:0;width:100%; box-sizing:border-box; padding:30rpx;">
				<uv-button size="large" color="linear-gradient(to right, rgb(216,17,22), rgb(235,187,32) 50%, rgb(188,28,38) 100%)" text="领取洗车券" @click="lingqu"></uv-button>
			</view>
		</view>
		<uv-modal ref="modal" title="输入验证码" :closeOnClickOverlay="false" :showConfirmButton="false">
			
			<view class="flex f1 fdc ptb20 aic">
				<uv-code-input v-model="qcode" mode="box" :space="0" :maxlength="4"  hairline @finish="finish"></uv-code-input>
				<view class="flex f1 fdc ptb20 aic f22">
					输入加油站营业员给予的四位验证码,验证码5分钟有效期
				</view>
			</view>
			
		</uv-modal>
	</view>
</template>

<script setup>
	import { util } from '/common/util.js';
	import { getCurrentInstance , ref , reactive,nextTick  } from 'vue';
	import { onLoad,onShow } from '@dcloudio/uni-app'
	const { proxy } = getCurrentInstance();
	const { $onLaunched } = proxy;
	const qcode= ref('');
	
	const lingqu = ()=>{
		if(!util.isLogin()){
			util.alert('请先登录');
			setTimeout(function(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},1000);
			return
		}
		proxy.$refs.modal.open();
	}
	const finish = ()=>{
		const code = qcode.value;
		console.log(code);
		util.request({
			url:"/mpuser/verifycode",
			data:{code:code},
			load:1
		}).then( (res)=>{
			if(res.code == 1){
				proxy.$refs.modal.close();
				util.alert('领取成功');
				setTimeout(function(){
					uni.redirectTo({
						url:"/pages/mine/coupon"
					})
				},1500)
			}else{
				util.alert('验证码错误');
			}
		} )
	}
	onLoad(async ()=>{
		await $onLaunched;
	});
</script>

<style scoped>
	.psn{position: relative;}
	.apps{background-color: #e9e2a1;}
</style>
